<template>
    <div class="footer-container">
        <el-row :gutter="24" class="el-row-reset">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <div class="toFile">
                    <!-- 谢谢 -->
                    <p class="thank">Thank For</p>
                    <!-- 技术支持 -->
                    <p class="centent">
                        <img src="../../../assets/imgs/tencent.png" alt="">
                        <span>腾讯云服务器</span>
                        <img src="../../../assets/imgs/tencent.png" alt="">
                        <span>腾讯云SSL证书</span>
                        <img src="../../../assets/imgs/tencent.png" alt="">
                        <span>腾讯云服务器</span>
                    </p>
                    <!-- 版本 -->
                    <div class="version">
                        <span>version</span>
                        <span>2.1.0</span>
                    </div>
                    <!-- 建站日期 -->
                    <p class="born-date">建站日期：农历2022-6-16</p>
                    <p class="badges">湘ICP备2021010654号-3</p>
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                <div class="contactMe">
                    <div class="icon">
                        <div v-on:mouseover="qqOver()" v-on:mouseout="qqOut($event)"><img src="../../../assets/imgs/footer/QQ.png" alt=""></div>
                        <div v-on:mouseover="wxOver()" v-on:mouseout="wxOut($event)"><img src="../../../assets/imgs/footer/wx.png" alt=""></div>
                        <a target="_blank" href="https://blog.csdn.net/LQlove1?spm=1010.2135.3001.5343"><img src="../../../assets/imgs/footer/csdn.png" alt=""></a>
                        <a target="_blank" href="https://gitee.com/liu-qiang-yyds"><img src="../../../assets/imgs/footer/gitee.png" alt=""></a>
                        <transition name="display" appear><img  class="ewm1" v-show="isQQ" src="../../../assets/imgs/footer/qqewm.jpg" alt=""></transition> 
                        <transition name="display" appear><img ref="wxewm" class="ewm2" v-show="isWX" src="../../../assets/imgs/footer/wxewm.jpg" alt=""></transition>
                    </div>
                    <div class="postbox">
                        联系邮箱：502108026@qq.com
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default{
    name:'myFooter',
    data(){
        return {
            isQQ:false,
            isWX:false
        }
    },
    mounted(){

    },
    methods:{
        qqOver(){
            this.isQQ = true
        },
        qqOut(){
            this.isQQ = false
        },
        wxOver(){
            this.isWX = true
        },
        wxOut(){
            this.isWX = false
        }
    }
}
</script>
<style lang="less" scoped>
.el-row-reset{
    margin: 0% !important;
}
.footer-container{
    background-color: var(--cardColor);
    padding-bottom: 30px;
    padding-top: 30px;
    // 备案信息
    .toFile{
        height: auto;
        text-align: center;
        p{
            padding: 0%;
            margin: 0%;
            font-size: 18px;
        }
        .thank{
            color: #26c6da;
            margin-bottom: 10px;
        }
        .centent{
            font-size: 14px;
            margin-bottom: 10px;
            // background-color: #ff9800;
            span{
                margin-right:5px;
                color: var(--font_2);
            }
            img{
                cursor: pointer;
                width: 20px;
                height: 20px;
                margin-right:5px;
                margin-bottom: -6px;
            }

        }
        .version{
            width: 120px;
            height: 40px;
            display: flex;
            margin: 0% auto;
            span{
                width: 60px;
                height: 80%;
                line-height: 30px;
                font-size: 14px;
                color: var(--font_1);
            }
            span:nth-child(1){
                background-color: #ff9800;
                border-radius: 10px 0px 0px  10px;
            }
            span:nth-child(2){
                background-color: #26c6da;
                border-radius: 0px 10px 10px  0px;
            }
        }
        .badges{
            width: 190px;
            background-image: url('../../../assets/imgs/badges.png');
            background-repeat: no-repeat;
            margin: 0% auto;
            text-align: right;
        }
        .born-date , .badges , .version {
            font-size: 14px;
            margin-bottom: 10px;
            color: var(--font_2);
        }
    }
    .contactMe{
        height: 160px;
        display: flex;
        flex-direction:column;
        justify-content: center;
        color: var(--font_2);
        .icon{
            text-align: center;
            display: flex;
            justify-content: center;
            div{
                width: auto;
                float: left;
                cursor: pointer;
            }
            img{
                width: 30px;
                height: 30px;
                margin-right: 10px;
            }
            .ewm1{
                animation-name: display;
                animation-timing-function: ease;
                width: 60px;
                height: 60px;
                position: absolute;
                margin-right: 128px;
                margin-top: -50px;
            }
            .ewm2{
                animation-name: display;
                animation-timing-function: ease;
                width: 60px;
                height: 60px;
                position: absolute;
                margin-right: 50px;
                margin-top: -50px;
            }
        }
        .postbox{
            font-size: 14px;
            text-align: center;
        }
    }

}

</style>
<style>
.display-enter-active, .display-leave-active{
    transition: 0.2s linear;
}
.display-enter{
    transform: translateY(-100%);
}
.display-enter-to{
    transform: translateY(0);
}
.display-leave{
    transform: translateY(0);
}
.display-leave-to{
    transform: translateY(-100%);
}
</style>